<template>
  <theme :color="color">
    <cpPie
      :style="{ height: '280px' }"
      :data="data"
      :option="useOption"
      :extendOption="useExtendOption"
    ></cpPie>
  </theme>
</template>
<script>
import { color } from '@/utils'
import cpPie from '@cci/cp-pie-slide'
import Theme from '@cci/cp-theme'
import { merge } from '@cci/lib-charts-utils'
const baseExtendOption = {
  valueDecimals: 0,
  percentDecimals: 0,
  showtitle: true
}
const baseOption = {
  series: [{ radius: ['40%', '60%'] }],
  title: {
    textStyle: {
      rich: {
        name: {
          color: '#000',
          fontSize: 24
        },
        val: {
          color: '#000',
          fontSize: 12
        }
      }
    }
  },
  legend: {
    textStyle: {
      rich: {
        title: {
          color: '#000',
          fontSize: 14,
          fontWeight: 400
        },
        name: {
          color: '#000',
          fontSize: 12
        },
        value: {
          color: '#000',
          fontSize: 12
        },
        percent: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 400
        }
      }
    }
  }
  // color: ['#BB9AF2', '#7EA9FF', '#FEDA6D', '#7CEBBF']
}
const baseData = [
  { name: '设备', value: 12.1, unit: '台' },
  { name: '建材', value: 22.2, unit: '台' },
  { name: '食品', value: 20.3, unit: '台' }
]
export default {
  name: 'ChartPie',
  data() {
    return {
      color: color
    }
  },
  props: {
    data: {
      type: Array,
      default() {
        return baseData
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    extendOption: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {
    cpPie,
    Theme
  },
  computed: {
    useOption() {
      return merge({}, baseOption, this.option)
    },
    useExtendOption() {
      return merge({}, baseExtendOption, this.extendOption)
    }
  }
}
</script>

